<template>
  <el-dialog title="预览" class="previewBox" :visible.sync="tableData.qicture" @close="qictureVisible">
    <p />
    <div id="preview">
      <div v-if="tableData.previewType"><img class="upPreviewClass" :src="tableData.upPreview" alt=""></div>
      <div class="videoClass"><video class="videoPreviewClass" :src="tableData.videoPreview" controls="controls" /></div>
      <div v-if="tableData.previewType"><img class="downPreviewClass" :src="tableData.downPreview" alt=""></div>
    </div>
  </el-dialog>
</template>
<script>
import { global } from '../../filter/global-api'

import _common from '../../framework/commonJs/wptx_common'
import _tools from '../../framework/commonJs/wptx_tools'
const _FUNCTION_NAME = _common.pageName.WPTXPREVIEW
import $ from 'jquery'
export default {
  props: {},
  data() {
    return {
      tableData: {
        downPreview: '', // 预览下图
        videoPreview: '', // 预览视频
        upPreview: '', // 预览上图
        displayScaleWidth: '', // 显示比例的宽度
        displayScaleHeight: '', // 显示比例的高度
        previewType: true, // 上下图是否显示
        qicture: false // 上传的蒙版是否显示
      },
      otherData: {}
    }
  },
  methods: {

    /*                     通用方法                      */

    /*  初始化方法（初始化页面数据）  */
    init(data) {
      const self = this
      self.tableData.downPreview = data.downPreview // 预览下图
      self.tableData.videoPreview = data.videoPreview // 预览视频
      self.tableData.upPreview = data.upPreview // 预览上图
      self.tableData.displayScaleWidth = data.displayScaleWidth // 显示比例的宽度
      self.tableData.displayScaleHeight = data.displayScaleHeight // 显示比例的高度
      self.tableData.qicture = true // 上传的蒙版是否显示
      const previewWidth = 1000
      const previewHidth = ''
      setTimeout(function() {
        const upPreviewHight = $('.upPreviewClass').height()
        const downPreviewHight = $('.downPreviewClass').height()
        const displayHeight =
          (1000 / self.tableData.displayScaleWidth) *
          self.tableData.displayScaleHeight
        if (
          upPreviewHight >= displayHeight ||
          downPreviewHight >= displayHeight ||
          parseInt(upPreviewHight + downPreviewHight) >= parseInt(displayHeight)
        ) {
          self.tableData.previewType = false
        } else {
          self.tableData.previewType = true
        }
        $('#preview').css(
          'height',
          (1000 / self.tableData.displayScaleWidth) *
            self.tableData.displayScaleHeight +
            'px'
        )
      }, '100')
    },
    qictureVisible() {
      var self = this
      var video = $('.videoPreviewClass')[0]
      video.pause()
      self.tableData.downPreview = '' // 预览下图
      self.tableData.videoPreview = '' // 预览视频
      self.tableData.upPreview = '' // 预览上图
      self.tableData.displayScaleWidth = 0 // 显示比例的宽度
      self.tableData.displayScaleHeight = 0 // 显示比例的高度
      self.tableData.qicture = false
      self.tableData.previewType = true
    }
  }
}
</script>
